<template>
  <view class="searchLayout">
    <view class="search">
      <view class="search-input">
        <input v-model="searchText" placeholder="请输入昵称或者ID" @confirm="searchUser" />
      </view>
      <view class="search-btn">
        <button @click="searchUser">搜索</button>
      </view>
    </view>
    <scroll-view :scroll-y="true" :show-scrollbar="false">
      <view class="scrollhLayout">
        <view class="scroll-item" @click="to(item.userId, item.btnStatus)" v-for="item in userList" :key="item._id">
          <view class="scroll-item-img">
            <image :src="item.img" mode="widthFix" />
          </view>
          <view class="scroll-item-name">
            <view class="name">{{ item.nickname }}</view>
            <view class="id">
              <view class="tip">ID :</view>
              <view class="num">{{ item.userId }}</view>
            </view>
          </view>
          <view :class="['scroll-item-btn', item.isColok ? '' : 'disabled']">
            <view :class="['stastus']" @click.stop="click(item)">
              {{ item.btnStatusText }}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="noUser" v-if="searchNum == 0">
      <image src="../../static/svg/zwxx.svg" mode="widthFix" class="img" />
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { reqSearchUser, reqRelationEnd } from '../../api/search'
import { useUserStore } from "../../store/modules/user"
import { onLoad, onShow } from '@dcloudio/uni-app';
import { FG } from '../../api//req.js';


let searchText = ref("")
let userList = reactive([])

let user = useUserStore()
let imageUrl = `${FG.baseUrl}/static/`
let searchNum = ref(2)
let lastSearch = ''
function to(userId, friendStatus) {
  uni.navigateTo({ url: `/pages/user/user?userId=${userId}&friendStatus=${friendStatus}` })
}

function reqRelationSettimeout(obj = { uid: String, fid: Array }) {
  //请求发送错误的处理
}
async function searchUser() {
  if (searchText.value.trim() == "") return
  if (searchText.value.trim() == lastSearch) return
  lastSearch = searchText.value.trim()
  uni.showLoading({ title: "搜索中" })
  let res = await getreqSearchUser()
  searchNum.value = +res
  uni.hideLoading()
}


async function getreqSearchUser() {
  let res = await reqSearchUser({ search: searchText.value })
  if (res.status == 200) {
    let { data } = res
    if (data.length > 0) {
      let fid = []
      data.forEach(item => {
        fid.push(item._id)
      })
      let resRelation = await reqRelationEnd({
        uid: user.user._id,
        fid: fid
      })
      if (resRelation.reqErrIndex.length > 0) {
        let errFid = []
        resRelation.reqErrIndex.forEach((item) => {
          errFid.push(fid[item])
        })
        reqRelationSettimeout({
          uid: user.user._id,
          fid: errFid
        })
      } else {
        for (let i = 0; i < data.length; i++) {
          data[i].btnStatus = resRelation.res[i].status
          switch (resRelation.res[i].status) {
            case 200:
              data[i].btnStatusText = "发送消息"
              data[i].isColok = true
              break
            case 211:
              data[i].btnStatusText = "已申请"
              data[i].isColok = false
              break
            case 213:
              data[i].btnStatusText = "再次申请"
              data[i].isColok = true
              break
            case 214:
              data[i].btnStatusText = "禁止申请"
              data[i].isColok = false
              break
            case 215:
              data[i].btnStatusText = "对方已申请"
              data[i].isColok = true
              break
            case 216:
              data[i].btnStatusText = "已拒绝"
              data[i].isColok = false
              break
            case 217:
              data[i].btnStatusText = "已禁止申请"
              data[i].isColok = false
              break
            default:
              data[i].btnStatusText = "加好友"
              if (user.user._id == data[i]._id) {
                data[i].btnStatusText = "发送消息"
                data[i].btnStatus = 200
              }
              data[i].isColok = true
              break
          }
        }
      }
    }
    userList.splice(0, userList.length)
    for (let i = 0; i < data.length; i++) {
      data[i].img = `${imageUrl}${data[i].img}`
      userList.push(data[i])
    }
    return data.length
  }
}

function click(item) {
  if (!item.isColok) return
  switch (+item.btnStatus) {
    case 200:
      uni.navigateTo({ url: `/pages/chat/chat?my=${user.user._id}&target=${item._id}` })
      break
    case 215:
      uni.navigateTo({ url: '/pages/friendRequest/friendRequest' })
      break
    case 218:
      uni.navigateTo({ url: `/pages/addFriend/addFriend?userId=${item.userId}` })
      break
  }
}
onShow(() => {
  if (searchText.value.trim() != "") {
    getreqSearchUser()
  }
})
onLoad(() => {
  uni.setNavigationBarTitle({
    title: '搜索',
  })
  let info = uni.getStorageSync('user')
  if (info) {
    user.user = info
  } else {
    uni.navigateTo({ url: '/pages/login/login' })
  }
})
</script>

<style lang="scss" scoped>
.searchLayout {
  width: 100%;
  height: calc(100vh - 44px + env(safe-area-inset-top));
  position: relative;

  .search {
    width: 100%;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .search-input {
      width: 80%;
      height: 60rpx;
      padding: 10rpx;
      padding-left: 10rpx;
      background-color: #eee;
    }

    .search-btn {
      width: 15%;
      height: 60rpx;


      button {
        width: 100%;
        height: 100%;
        padding: 0;
        font-size: 30rpx;
        line-height: 60rpx;
      }
    }
  }

  scroll-view {
    height: calc(100vh - 44px + env(safe-area-inset-top) - 100rpx);
  }

  .scrollhLayout {
    width: 100%;
    display: flex;
    flex-direction: column;
    scrollbar-width: 0;

    .scroll-item {
      width: 100%;
      height: 100rpx;
      display: flex;
      align-items: center;
      padding: 0 10rpx;
      justify-content: space-between;
      margin-bottom: 10rpx;
      border-bottom: 1px solid #eee;

      .scroll-item-img {
        width: 80rpx;
        height: 80rpx;

        image {
          width: 100%;
        }
      }

      .scroll-item-name {
        max-width: 60%;
        margin-left: 20rpx;
        flex: 1;

        .name {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .id {
          display: flex;
          align-items: center;

          .tip {
            font-size: 24rpx;
            color: #999;
          }

          .num {
            font-size: 24rpx;
            color: #999;
          }
        }
      }

      .scroll-item-btn {
        width: 20%;
        margin-left: 20rpx;
        padding: 0 10rpx;
        background-color: #fff;
        height: 60%;
        display: flex;
        align-items: center;
        border-radius: 10%;
        box-shadow: 0 0 3px 0px #eee;
        display: flex;
        justify-content: center;
        align-items: center;

        .stastus {
          font-size: 24rpx;
        }

        &.disabled {
          background-color: #eee;
        }

        &:active {
          background-color: #eee;
        }
      }


      &:last-child {
        border-bottom: 0px solid #000;
      }
    }
  }

  .noUser {
    height: calc(100vh - 44px + env(safe-area-inset-top) - 100rpx);
    width: 100%;
    position: absolute;
    left: 0;
    top: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .img {
      width: 60%;
      margin: 0 auto;
    }
  }
}
</style>